<template>
  <a-modal v-model="exportModel.show"
         :loading="exportModel.loading"
         :title="exportModel.title"
         :width="800"
         :mask-closable="false"
         @ok="close"
         @cancel="close"
  >
    <a-form-model ref="exportConfigForm" :model="exportConfig" :label-width="100">
      <a-form-model-item label="选择导出字段">
        <a-row>
          <a-col span="12" style="padding-right:10px">
            <a-select mode="multiple" v-model="exportConfig.properties">
              <a-select-option v-for="item in this.exportProperties" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
            </a-select>
          </a-col>
          <a-col span="6">
            <a-button v-on:click="doExport" :loading="exportModel.loading" type="primary">导出</a-button>
          </a-col>
        </a-row>

      </a-form-model-item>
      <a-form-model-item label="导出进度" v-if="exportTaskId !== null ">
        <a-row>
          <a-col span="6">
            <a-progress :percent="exportProgress" :stroke-color="{'0%':'#108ee9', '100%':'#87d068'}" />
          </a-col>
          <a-col span="6" v-if="exportProgress === 100">
            <a target="_blank" :href="downloadSrc" >下载</a>
          </a-col>
        </a-row>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>

import {createExportTaskApi, queryExportProgressApi} from "@/api/userGroup";

export default {
  name: "UserListExportModal",
  props: {
    id: Number,
    exportModel: Object,
    config: Object,
    exportProperties: Array,
  },
  data : function (){
    return {
      exportConfig:{},
      exportTaskId: null,
      exportProgress: 0,
      timer: null,
    }
  },
  watch:{
    'exportModel.show': function (val){
      if (val){
        this.exportConfig = JSON.parse(JSON.stringify(this.config))
      }
    }
  },
  computed:{
    downloadSrc(){
      let date = this.moment(new Date()).format("YYYYMMDD");
      return "http://" + window.location.host+ "/mopFile/userGroupExport/"+this.exportConfig.internalName + "-" + date + "-" + this.exportTaskId + "-0.csv"
    }
  },
  methods: {
    close (){
      this.exportModel.show = false;
      this.exportModel.loading = false;
      this.exportTaskId = null;
      this.clearTimer()
    },
    doExport (){
      this.clearTimer()
      if (typeof this.exportConfig.properties !== 'object' || this.exportConfig.properties.length < 1){
        this.$message.error("导出字段不能为空");
      }
      createExportTaskApi(this.id, this.exportConfig).then(response => {
        if (response.code === 0) {
          this.$message.success("导出任务创建成功")
          this.exportTaskId = response.data.id
          this.setTimer()
        }else {
          console.log(response)
        }
      }).catch(error => {
        console.log(error);
        this.$message.error("导出任务创建失败,请稍后重试！");
      }).finally(() => {})
    },
    setTimer(){
      this.clearTimer()
      this.timer = setInterval(() => {
        setTimeout(this.queryExportProgress, 0)
      }, 1000)
    },
    clearTimer(){
      if (this.timer){
        clearInterval(this.timer)
      }
      this.timer = null
    },
    queryExportProgress (){
      if (!this.exportTaskId){
        return
      }
      queryExportProgressApi(this.exportTaskId, {groupId: this.id}).then(response => {
        if (response.code === 0) {
          this.exportProgress = response.data
          if (response.data === 100.0){
            this.clearTimer()
          }
        }else {
          console.log(response)
        }
      }).catch(error => {
        console.log(error);
      }).finally(() => {})
    },
  },
  beforeDestroy() {
    this.clearTimer()
  }
}
</script>

<style scoped>

</style>
